import React from "react";
import { NavBar, Space, Toast } from "antd-mobile";
import { useNavigate, useSearchParams } from "react-router-dom";
import request from '../../api/request'
import { AlipayCircleFill ,SystemQRcodeOutline,CollectMoneyOutline} from 'antd-mobile-icons'
import { Cell } from "react-vant";
function Index() {
  const navigate = useNavigate();
  const back = () => navigate(-1);
const [sp] = useSearchParams();
const title = sp.get('title');
const price = sp.get('price');
const id = sp.get('id')
// 调用支付接口
  const goMoney= async()=>{
    const res = await request.get('/api/pay',{
      params:{title,price,id}
    })
    console.log(res);
    if(res.code===200){
      Toast.show('成功连接支付宝')
      // code码正确，跳转到支付宝支付页面
      window.location.href = res.data;
    }else{
      Toast.show('连接失败,请重新尝试支付')
    }
  }
  return (
    <div>
      <NavBar onBack={back}>支付页</NavBar>

      <Cell onClick={()=>goMoney()}  title="支付宝" > <AlipayCircleFill /> </Cell>
      <Cell title="微信" > <CollectMoneyOutline /> </Cell>
      <Cell title="云闪付" >  <SystemQRcodeOutline />  </Cell>
    </div>
  );
}

export default Index;
